#軸

軸はグラフに不可欠な部分です。これらは、データがチャート上のピクセル値にどのようにマッピングされるかを決定するために使用されます。デカルト チャートには、2 次元のキャンバスに点をマッピングするための 1 つ以上の X 軸と 1 つ以上の Y 軸があります。これらの軸は次のように知られています「デカルト軸」。

レーダー チャートや極エリア チャートなどの放射状チャートには、角度方向と半径方向の点をマッピングする 1 つの軸があります。これらはとして知られています「放射軸」。

Chart.js >v2.0 のスケールは大幅に強力ですが、v1.0 のスケールとは異なります。

• 複数の X 軸と Y 軸がサポートされています。
• 組み込みのラベル自動スキップ機能は、重複する可能性のある目盛とラベルを検出し、n 番目ごとのラベルを削除して、正常に表示された状態を保ちます。
• スケールタイトルがサポートされています。
• 新しいスケール タイプは、まったく新しいグラフ タイプを作成しなくても拡張できます。

#デフォルトのスケール

デフォルトscaleIdデカルト チャートの は次のとおりです。'x'と'y'。放射状チャートの場合:'r'。 各データセットは、必要な各軸 (x、y、または r) のスケールにマッピングされます。データセットがマッピングされるscaleIdは、xAxisID、yAxisIDまたrAxisID。 軸の ID が指定されていない場合は、その軸の最初のスケールが使用されます。軸のスケールが見つからない場合は、新しいスケールが作成されます。

いくつかの例：

次のグラフには、'x'と'y'スケール:

let chart = new Chart(ctx, {
  type: 'line'
});

次のグラフにはスケールが付いています'x'と'myScale':

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      data: [1, 2, 3]
    }]
  },
  options: {
    scales: {
      myScale: {
        type: 'logarithmic',
        position: 'right', // `axis` is determined by the position as `'y'`
      }
    }
  }
});

次のグラフにはスケールが付いています'xAxis'と'yAxis':

let chart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      yAxisID: 'yAxis'
    }]
  },
  options: {
    scales: {
      xAxis: {
        // The axis for this scale is determined from the first letter of the id as `'x'`
        // It is recommended to specify `position` and / or `axis` explicitly.
        type: 'time',
      }
    }
  }
});

次のグラフには、'r'規模：

let chart = new Chart(ctx, {
  type: 'radar'
});

次のグラフには、'myScale'規模：

let chart = new Chart(ctx, {
  type: 'radar',
  scales: {
    myScale: {
      axis: 'r'
    }
  }
});

#共通構成

#全軸共通オプション

名前空間:options.scales[scaleId]

#ティック設定

#すべての軸に共通の目盛オプション

名前空間:options.scales[scaleId].ticks

#軸範囲の設定

軸範囲設定の数を考慮すると、それらすべてがどのように相互作用するかを理解することが重要です。

のsuggestedMaxとsuggestedMin設定は、軸のスケールに使用されるデータ値のみを変更します。これらは、自動フィット動作を維持しながら軸の範囲を拡張するのに役立ちます。

let minDataValue = Math.min(mostNegativeValue, options.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.suggestedMax);

この例では、正の最大値は 50 ですが、データの最大値は 100 まで拡張されます。ただし、最小データ値は 100 を下回っているため、suggestedMin設定しても無視されます。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            y: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

とは対照的に、suggested*設定、minとmax設定により、軸に明示的な終端が設定されます。これらを設定すると、一部のデータ ポイントが表示されなくなる場合があります。

#スタッキング

デフォルトでは、データはスタックされません。もしstacked値スケール (水平チャートの Y 軸) のオプションは次のとおりです。true、正の値と負の値は別々に積み重ねられます。さらに、stackデータセットごとにオプションを定義して、さらにスタック グループに分割できます。もっと...。 グラフによっては、正の値と負の値を積み上げたい場合があります。それは指定することで実現できますstacked: 'single'。

#コールバック

更新プロセスのさまざまな時点でスケールのパラメーターを変更するために使用できる構成コールバックが多数あります。オプションは、軸オプションの最上位レベルで提供されます。

名前空間:options.scales[scaleId]

#軸のデフォルトの更新

スケールのデフォルト構成は簡単に変更できます。新しいオプションを次のように設定するだけです。Chart.defaults.scales[type]。

たとえば、すべての線形スケールの最小値を 0 に設定するには、次の手順を実行します。この時間以降に作成された線形スケールの最小値は 0 になります。

Chart.defaults.scales.linear.min = 0;

#新しい軸の作成

新しい軸を作成するには、を参照してください。開発者ドキュメント。